<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #083a6d;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
  background-color: #083a6d;
}
/*自定义弹出框头部样式*/
.my-header {
  display: flex;
  justify-content: flex-start;
  color: #083a6d;
}
.table-box{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 12rem);
  justify-content: space-evenly;
  gap: 20px;
}
.table-box-item{
  min-height: 100px;
  border-radius: 10px;
  background: #f8f8f8;
  box-shadow:  10px 10px 20px #cecece,
  -10px -10px 20px #f1f0f0;
}
.box-item{
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>


<template>
  <el-card class="w-full">
    <!--头部区域 start-->
    <template #header>
      <div class="card-header">
        <h3>
          <el-icon style="margin-right: 10px;"><Avatar /></el-icon>
          课程视频管理
        </h3>

        <div class="card-search">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-button plain  color="#2fa7b9" @click="dialogShow=true">添加课程</el-button>
            </el-col>
          </el-row>
        </div>

      </div>
    </template>

    <div class="table-box">
      <div v-for="item in data.list.content" class="table-box-item">
        <div class="box-item">
          <div style="height:30px" class="row-center">{{item.name}}</div>
          <div style="height:30px;" class="row-center">{{item.type}}</div>
          <div style="height:80px;width: 100%" class="row-center">
            <video @play="autoplay=!autoplay" :autoplay="true" height="80px" :src="visitPath+item.url" :show-center-play-btn="true"></video>
          </div>
        </div>
      </div>
    </div>

    <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                   :total="data.total"
                   v-model:page-size="data.pageSize"
                   :page-sizes="[10,20,30,40]"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

    <div v-if="dialogShow">
      <video-dialog :item-info="itemInfo" @receive-video="receiveVideoFun"></video-dialog>
    </div>

  </el-card>
</template>

<script setup lang="ts">


import {onMounted, ref} from "vue";
import VideoDialog from "@/components/videoDialog.vue";
import {postQueryVideo} from "@/api/edu/videoApi";
import {visitPath} from "@/api/edu/fileApi";
const dialogShow =ref(false);
const itemInfo = ref({
  "name":'',
  "type":"",
  "url":""
})
const data = ref({
  list:{content:[]},
  list2:{content:[]},
  sexList:"",
  loading:true,
  dict2:[],
  dict3:[],
  dict4:[],
  dict5:[],
  dict6:[],
  dict7:[],
  // 搜索关键字
  searchValue: '',
  // 总条数
  total: 0,
  // 每页显示行数
  pageSize: 10,
  // 当前页码
  pageIndex: 0,
})
const autoplay = ref(false);

onMounted(()=>{
  postQueryVideoFun()
})

/**
 * 查询视频
 * @param val
 */
function postQueryVideoFun(){
  postQueryVideo({
    page:data.value.pageIndex,
    limit:data.value.pageSize
  }).then((res)=>{
    if (res.code==200){
      data.value.list=res.data;
      data.value.list2=res.data;
      data.value.total=res.data.totalPages;
      data.value.pageSize = res.data.size;
    }
  })
}


/**
 * 销毁组件
 * @param val
 */
function receiveVideoFun(e:any){
  dialogShow.value=false;
  itemInfo.value={
    "name":'',
    "type":"",
    "url":""
  }
  postQueryVideoFun();
}

const handleCurrentChange = (val:number)=> {
  data.value.pageIndex=val-1;
  postQueryVideoFun();
}
const handleSizeChange = (val:number)=> {
  data.value.pageSize=val;
  postQueryVideoFun();
}
</script>







